<template>
  <div class="page_content">
    <div class="doumee_table_header">
      <slot name="header" />
    </div>
    <el-table
      ref="table"
      v-loading="Loading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table doumee-element-tableb doumee-element-tablec"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        v-if="showSelectColumn"
        type="selection"
        align="center"
        width="60"
      />
      <el-table-column
        v-if="showIndexColumn"
        type="index"
        :label="$t('message.xh')"
        align="center"
        :width="$i18n.locale === 'ZH'? 50 : 120"
      />
      <el-table-column v-for="propItem in propList" :key="propItem.prop" v-bind="propItem" align="center" :show-overflow-tooltip="propItem.showoverflowtooltip || true">
        <template #default="scope">
          <slot :name="propItem.slotName" :row="scope.row">
            {{ scope.row[propItem.prop] }}
          </slot>
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      :total="totalCount"
      :page="page"
      @current-change="currentChange"
      @SizeChange="SizeChange"
    />
  </div>
</template>

<script>
import Pagination from '@/components/paginations'
export default {
  components: {
    Pagination
  },
  props: {
    list: {
      type: Array,
      required: true
    },
    propList: {
      type: Array,
      required: true
    },
    listLoading: {
      type: Boolean,
      default: false
    },
    totalCount: {
      type: Number,
      default: 0
    },
    page: {
      type: Number,
      default: 1
    },
    showSelectColumn: {
      type: Boolean,
      default: false
    },
    showIndexColumn: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      Loading: this.listLoading
    }
  },
  watch: {
    listLoading: {
      handler(newVal) {
        this.Loading = newVal
      }
    }
  },
  created() {
    // this.$refs['table'].doLayout()
  },
  methods: {
    handleSelectionChange(value) {
      this.$emit('selectionChange', value)
    },
    currentChange(value) {
      this.$emit('currentChange', value)
    },
    SizeChange(value) {
      this.$emit('SizeChange', value)
    }
  }
}
</script>

<style>

</style>
